<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.taskName" placeholder="任务名称" class="filter-item search-item"/>
      <el-input v-model="queryParams.processName" placeholder="流程名称" class="filter-item search-item"/>
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      @selection-change="onSelectChange"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column label="任务名称" prop="taskName" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程名称" prop="processName" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.processName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行实例编号" prop="instanceId" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.instanceId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人" prop="starter" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.starter }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="办理人" prop="assigneeName" :show-overflow-tooltip="true" align="center" min-width="120px">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.assigneeName }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="创建时间" prop="createTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程启动时间" prop="startTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否挂起" prop="suspendStateName" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.suspendStateName }}</span>
        </template>
      </el-table-column>

      <!--TODO 后续修改-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <apply-after
            v-if="scope.row.instanceId"
            :row="scope.row"
            :taskId="scope.row.taskId"
            :taskName="scope.row.taskName"
            type="all"
            @getList="search"
          ></apply-after>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size"
                @pagination="search"/>
  </div>
</template>

<script>
  import {
    listProcess
  } from '@/api/activiti/task'
  import Pagination from '@/components/Pagination'
  import {taskAllList} from "@/api/activiti/task";
  import ApplyAfter from "@/components/Activiti/ApplyAfter/index";

  export default {
    name: "taskAllList",
    components: {Pagination, ApplyAfter},
    data() {
      return {
        tableKey: 0,
        loading: false,
        list: [],
        total: 0,
        queryParams: {},
        sort: {},
        selection: [],
        pagination: {
          size: 10,
          num: 1
        },
      }
    },
    mounted() {
      this.fetch()
    },
    methods: {
      search() {
        this.fetch({
          ...this.queryParams,
          ...this.sort
        })
      },
      reset() {
        this.queryParams = {}
        this.sort = {}
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      clearSelections() {
        this.$refs.table.clearSelection()
      },
      onSelectChange(selection) {
        this.selection = selection
      },
      sortChange(val) {
        this.sort.field = val.prop
        this.sort.order = val.order
        this.search()
      },
      fetch(params = {}) {
        this.loading = true
        params.pageSize = this.pagination.size
        params.pageNum = this.pagination.num
        taskAllList(params).then(res=>{
          if(res.code==200){
            const data = res.data
            this.total = data.total
            this.list = data.rows
          }
        }).finally(()=>{
          this.loading = false
        })
      },
    }
  }
</script>

<style scoped>

</style>
